<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">

      <el-button
        type="primary"
        @click="refresh">刷新</el-button>
      <el-table :data="discussList" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="title" label="标题" sortable></el-table-column>
        <el-table-column prop="user_name" label="评论者" sortable></el-table-column>
        <el-table-column prop="create_time" label="时间" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handleRead(scope.$index, scope.row)">查看</el-button>
            <el-button
              size="small"
              type="danger"
              @click="doDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span v-html="contents"></span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
      </el-dialog>
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
  import { getAskList, timeFormat, deleteAsk } from '@/api/api'
  export default {
    data () {
      return {
        discussList: [],
        page: 1,
        total: 1,
        dialogVisible: false,
        title: '',
        contents: ''
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    methods: {
      // 获取设备名称
      async initData () {
        this.loading = true
        try {
          getAskList(this.page).then((res) => {
            this.loading = false
            this.discussList = res.data.results
            this.total = res.data.count
            for (let i = 0; i < this.discussList.length; i++) {
              this.discussList[i]['create_time'] = timeFormat(this.discussList[i]['create_time'])
            }
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
      handleCurrentChange (val) {
        this.page = val
        this.initData()
      },
      handleRead (index, row) {
        this.title = this.discussList[index]['title']
        this.contents = this.discussList[index]['content']
        this.dialogVisible = true
      },
      doDelete (index, row) {
        this.$confirm('确定删除--' + row.title + '--这条评论吗?').then(_ => {
          deleteAsk(row.id).then(res => {
            this.initData()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }, res => {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          })
        }).catch(_ => {})
      },
      refresh () {
        this.initData()
      }
    }
  }

</script>

<style scoped>
  .el-button {
    margin: 5px;
  }
</style>
